<template>
	<el-form ref="loginRefFrom" :model="userDetail" label-width="120px">

		<el-form-item label="ID">
			<div class="detail">&nbsp;{{userDetail.id}}</div>
		</el-form-item>

		<el-form-item label="账号">
			<div class="detail">&nbsp;{{userDetail.loginAct}}</div>
		</el-form-item>

		<el-form-item label="密码">
			<div class="detail">&nbsp;*******</div>
		</el-form-item>

		<el-form-item label="姓名">
			<div class="detail">&nbsp;{{userDetail.name}}</div>
		</el-form-item>

		<el-form-item label="手机号">
			<div class="detail">&nbsp;{{userDetail.phone}}</div>
		</el-form-item>

		<el-form-item label="邮箱">
			<div class="detail">&nbsp;{{userDetail.email}}</div>
		</el-form-item>

		<el-form-item label="账号是否过期">
			<div class="detail">&nbsp;{{userDetail.accountNoExpired === 1 ? '是' : '否'}}</div>
		</el-form-item>

		<el-form-item label="密码是否过期">
			<div class="detail">&nbsp;{{userDetail.credentialsNoExpired === 1 ? '是' : '否'}}</div>
		</el-form-item>

		<el-form-item label="账号是否锁定">
			<div class="detail">&nbsp;{{userDetail.accountNoLocked === 1 ? '锁定' : '正常'}}</div>
		</el-form-item>

		<el-form-item label="账号是否启用">
			<div class="detail">&nbsp;{{userDetail.accountEnabled === 1 ? '启用' : '禁用'}}</div>
		</el-form-item>

		<el-form-item label="创建人">
			<div class="detail">&nbsp;{{userDetail.createByDao.name}}</div>
		</el-form-item>

		<el-form-item label="创建时间">
			<div class="detail">&nbsp;{{userDetail.createTime}}</div>
		</el-form-item>

		<el-form-item label="编辑人">
			<div class="detail">&nbsp;{{userDetail.editByDao.name}}</div>
		</el-form-item>

		<el-form-item label="编辑时间">
			<div class="detail">&nbsp;{{userDetail.editTime}}</div>
		</el-form-item>

		<el-form-item label="最近登录时间">
			<div class="detail">&nbsp;{{userDetail.lastLoginTime}}</div>
		</el-form-item>

		<el-form-item>
			<el-button type="success" @click="goBack()">返 回</el-button>
		</el-form-item>



	</el-form>

</template>

<script>
	import {
		defineComponent
	} from 'vue'
	import {
		doGet
	} from '../http/httpRequest'

	export default defineComponent({
		name: "UserDetailView",

		data() {
			return {
				// 用户详情对象
				userDetail: {
					createByDao: {},
					editByDao: {},
				}
			}
		},

		mounted() {
			this.loadUserDetail();
		},

		methods: {

			// 加载用户详情
			loadUserDetail() {
				// id名字要和动态路由中配置的path: 'user/:id'，名字相同
				let id = this.$route.params.id

				doGet("/api/user/" + id, {}).then(resp => {
					if (resp.data.code === 200) {
						this.userDetail = resp.data.data

						if (!this.userDetail.createByDao) {
							this.userDetail.createByDao = {}
						}

						if (!this.userDetail.editByDao) {
							this.userDetail.editByDao = {}
						}
					}
				})
			},
			// 返回函数
			goBack() {
				this.$router.go(-1);
			}
		},
	})
</script>

<style>
	.detail {
		background-color: #f0ffff;
		width: 100%;
		padding-left: 15px;
	}
</style>